import React, { useContext, useMemo } from 'react';
import { Collapse, Popover, Button, Typography } from 'antd';
import { CaretRightOutlined } from '@ant-design/icons';
import { TextWidget } from '@inbiz/react';
import CategoryListRender from '../CategoryListRender';
import CategoryLeftItem from './CategoryLeftItem';
import HalfCheckBox from '../CategoryTop/HalfCheckBox';
import SecondImg from '../SecondImg'
import { ThemeContext } from '../context';
const { Panel } = Collapse;
const { Text } = Typography;
export default function CustomMultiple(props) {
  const { groupList, selected, onSelected, level, parentItem, config, wholeref } = props;
  
  const { getChecked, handlechange } = useContext(ThemeContext);
  const defaultKeys = useMemo(() => {
    return groupList.map((ele) => ele.Value)
  }, [groupList])
  
  return (
    <Collapse
      bordered={false}
      expandIconPosition="end"
      defaultActiveKey={defaultKeys}
      className="categoryLeftChild"
      expandIcon={({ isActive }) => <CaretRightOutlined className={isActive ? 'top' : 'right'} />}
    >
      {groupList.map((item, i) => {
        return (
          <Panel
            key={item.Value}
            header={
              <span>
               
                {parentItem.IsWhether && (
                  <HalfCheckBox
                    getChecked={getChecked}
                    item={item}
                    selected={selected}
                    handlechange={handlechange}
                    level={level}
                  />
                )}{' '}
                <SecondImg Icon={item.Icon}/>
                <Text style={{ width: (config.sectionWidth || config.leftSectionWidth) - 80 }} ellipsis title={`${item.Value}`}>
                  {`${item.Value} : `}
                </Text>
              </span>
            }
          >
            <Popover
              // visible
              transitionName=""
              maskTransitionName=""
              mouseEnterDelay={0.05}
              mouseLeaveDelay={0.05}
              getPopupContainer={() => wholeref.current}
              placement="bottom"
              overlayClassName="categoryOverLay categoryOverLayThree"
              content={
                <CategoryLeftItem
                  item={item}
                  parentItem={parentItem}
                  selected={selected}
                  onSelected={onSelected}
                  index={level}
                  config={config}
                  style={{ marginLeft: 40 }}
                />
              }
            >
              {item.sectionItemList.length > 5 && <div className={`categoryItemBox selected whole`}>
                <div>
                  <Button type="text" className="all" size="small" shape="round">
                    <div>
                      <TextWidget>SearchResultEngine.whole</TextWidget>
                    </div>
                  </Button>
                </div>
              </div>}
            </Popover>
            <CategoryListRender
              IsGroup={true}
              item={item}
              number={5}
              selected={selected}
              onSelected={onSelected}
              level={level}
              IsWhether={parentItem.IsWhether}
              config={config}
              parentItem={parentItem}
            />
          </Panel>
        );
      })}
    </Collapse>
  );
}
